<template>
  <div id="data">
    <h1>数据操作测试</h1>
    <el-row :gutter="20">
      <el-col :span="6">
        <el-input v-model="userInfo.name" placeholder="请输入姓名"></el-input>
      </el-col>
      <el-col :span="6">
        <el-input v-model="userInfo.gender" placeholder="请输入性别"></el-input>
      </el-col>
      <el-col :span="6">
        <el-input v-model="userInfo.number" placeholder="请输入电话号码"></el-input>
      </el-col>
      <el-col :span="6">
        <el-date-picker
            v-model="userInfo.birthday"
            align="right"
            type="date"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
            placeholder="选择日期">
        </el-date-picker>
      </el-col>
      <el-button type="primary" class="add-btn" @click="addUser">主要按钮</el-button>
    </el-row>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column
          label="序号"
          width="180">
        <template slot-scope="scope">
          {{scope.$index + 1}}
        </template>
      </el-table-column>
      <el-table-column
          prop="name"
          label="姓名"
          width="180">
      </el-table-column>
      <el-table-column
          prop="gender"
          label="地址">
      </el-table-column>
      <el-table-column
          prop="number"
          label="日期">
      </el-table-column>
      <el-table-column
          prop="birthday"
          label="生日"
          >
      </el-table-column>
      <el-table-column
          prop="birthday"
          label="操作">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" @click="editUser()" circle></el-button>
          <el-button type="danger" icon="el-icon-delete" @click="delUser(scope.$index)" circle></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <EditData :tableData="tableData[0]"></EditData>
    </el-dialog>
  </div>
</template>


<script>
import EditData from "./EditData.vue";

export default {
    data: function (){
      return {
        input: " ",
        userInfo:{
          name:"",
          gender:"",
          number:"",
          birthday:""
        },
        tableData: [{
        name: 'lhh',
        gender: '男生',
        number: '18795898753',
        birthday:'1996-11-17'
      }],
        dialogVisible: false,   //控制弹窗的显示
        editData:{
          name:"",
          gender:"",
          number:"",
          birthday:""
        },
        userIndex: 0
      }
    },
    methods:{
      // 新增用户信息
      addUser() {
        if (!this.userInfo.name) {
          this.$message({
            message: '请输入正确的名称',
            type: 'warning'
          });
          return;
        }
        if (!this.userInfo.gender) {
          this.$message({
            message: '请输入正确的性别',
            type: 'warning'
          });
          return;
        }
        if (!this.userInfo.number) {
          this.$message({
            message: '请输入正确的电话号码',
            type: 'warning'
          });
          return;
        }
        if (!/^1[3456789]\d{9}$/.test(this.userInfo.number)) {
          this.$message({
            message: '请输入格式正确的电话号码',
            type: 'warning'
          });
          return;
        }
        if (!this.userInfo.birthday) {
          this.$message({
            message: '请输入正确的日期',
            type: 'warning'
          });
          return;
        }
        this.tableData.push(this.userInfo);
        // 清空输入框
        this.userInfo = {
          name: "",
          gender: "",
          number: "",
          birthday: ""
        }
      },

      //删除用户信息
      delUser(index) {
          this.$confirm('确认删除？')
              // eslint-disable-next-line no-unused-vars
            .then(_ => {
              this.tableData.splice(index, 1);
            })
              // eslint-disable-next-line no-unused-vars
            .catch(_ => {});
      },
      handleClose() {
        this.dialogVisible = false;
      },
      editUser() {
        this.dialogVisible = true;
      }

    },
    components: {
      EditData
    }
  }
</script>
<style>
.el-row {
  margin-bottom: 20px;
  &:last-child {
     margin-bottom: 0;
   }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
#data {
  width: 1024px;
  margin: 0 auto  ;
}
.add-btn {
  margin-top: 20px;
  width: 100%;
}
</style>
